(function (window) {
	'use strict';

	// 声明对象存储所有用于进行事项类别筛选的函数
	let filters = {
		all(todos){
			return todos
		},
		active(todos){
			return todos.filter(item=>!item.completed)
		},
		completed(todos){
			return todos.filter(item=>item.completed)
		}
	}

	// 声明常量用于存储本地存储中保存事项的键
	const TODOS_KEY = "todos_vue"
	// 声明对象统一保存本地存储的处理功能
	let todoStorage = {
		// 用于读取本地存储数据
		get(){
			return JSON.parse(localStorage.getItem(TODOS_KEY)) || []
		},
		set(todos){ // 通过侦听器触发
			localStorage.setItem(TODOS_KEY,JSON.stringify(todos))
		}
	}

	new Vue({
		el:"#app",
		data:{
			// 所有事项信息，应该从本地存储中取
			// todos:[
			// 	{ id:1, title:"示例内容1", completed:true },
			// 	{ id:2, title:"示例内容2", completed:false },
			// 	{ id:3, title:"示例内容3", completed:false }
			// ],
			todos:todoStorage.get(),
			// 新的输入项
			newTodo:'', 
			// 正在编辑的输入项
			editingTodo:null,
			// 编辑前的内容
			titleBeforeEdit:'',
			// 标记筛选项
			todoType:'all'
		},
		computed:{
			remaining(){
				// return this.todos.filter(item=>!item.completed).length;
				return filters['active'](this.todos).length;
			},
			allDone:{
				get(){
					return this.remaining === 0;
				},
				set(newVal){
					console.log(newVal)
					this.todos.map(item=>item.completed=newVal)
				}
			},
			doneNum(){
				return this.todos.length > this.remaining
			},
			// 用于进行事项筛选处理
			filteredTodo(){
				return filters[this.todoType](this.todos)
			}
		},
		methods:{
			pluralize(item){
				return item + (this.remaining<=1?"":"s")
			},
			// 添加新项
			addTodo(){
				let todo = this.newTodo
				if(!todo) return
				this.todos.unshift({id:this.todos.length+1,title:todo,completed:false})
				this.newTodo = ""
			},
			//---------------------------------------------------
			// 单项删除
			removeTodo(todo){
				let idx = this.todos.indexOf(todo)
				this.todos.splice(idx,1)
			},
			// 右下角删除以完成事项
			removeCompleted(){
				// this.todos = this.todos.filter(item=>!item.completed)
				this.todos = filters['active'](this.todos)
			},
			//---------------------------------------------------
			// 触发编辑，保持相关信息
			editTodo(todo){
				this.editingTodo = todo
				this.titleBeforeEdit = todo.title
			},
			// 取消编辑，还原状态与内容
			cancelEdit(todo){
				this.editingTodo = null;
				todo.title = this.titleBeforeEdit;
			},
			// 保存新编辑内容
			editDone(todo){
				// 失去焦点不一定要按enter回车，但是按了enter回车，必然会失去焦点。
				// enter回车会触发blur，导致删了两条数据。加个判断
				if(!this.editingTodo) return

				this.editingTodo = null;
				todo.title = todo.title.trim()
				if(!todo.title){
					this.removeTodo(todo)
				}
			}
			//---------------------------------------------------
		},
		directives:{
			// 自定义指令用于自动获取焦点
			'todo-focus':function(el,binding){
				if(binding.value) // value为 todo===editingTodo
				{
					el.focus()
				}
			}
		},
		// 侦听数据todos变化
		watch: {
			todos:{
				deep:true,
				handler:todoStorage.set
			}
		}
	})

})(window);
